<template>
  <div class="container">
    <nav-bar title="售后订单" />
    <div class="list">
      <div class="item">
        <div class="order-id">订单编号: {{order.OrderId}}</div>
        <div class="pro-info" v-if="order.orderProduct">
          <img :src='order.orderProduct.Img' />
          <div class="rt">
            <div class="name">{{order.orderProduct.ProductName}}</div>
            <div class="sort">
              <span v-if="order.orderProduct.Color && order.orderProduct.Color !== '室内'">颜色: {{order.orderProduct.Color}}</span>
              <span v-if="order.orderProduct.Size">尺寸: {{order.orderProduct.Size}}</span>
              <span>退{{order.ReturnQuantity}}件</span>
            </div>
          </div>
        </div>
        <div class="time-status-deal">
          <div class="status-deal">
            <div class="price">退款金额: <i>¥{{order.Amount}}</i>元</div>
            <div class="status">{{order.RefundStatus}}</div>
            <div class="link" v-if="order.SellerAuditStatusValue==2" @click="sendInfo">寄货</div>
          </div>
        </div>
        <div class="express" v-if="expressShow">
          <div class="item">
            <div class="label">快递公司</div>
            <div class="ipt"><input type="text" placeholder="请输入" v-model="ExpressCompanyName"></div>
          </div>
          <div class="item">
            <div class="label">快递单号</div>
            <div class="ipt"><input type="text" placeholder="请输入" v-model="ShipOrderNumber"></div>
          </div>
          <div class="expbtn">
            <div class="subbtn" @click="expressSubmit">确认提交</div>
          </div>
        </div>
        <div class="seller-remark" v-if="order.SellerAuditStatusValue===2 && order.SellerRemark">{{order.SellerRemark}}</div>
        <div class="links">
          <div class="type">{{order.RefundMode}}</div>
          <div class="type">{{order.ReasonDetail}}</div>
        </div>
        <div class="links2">
          <div class="type">联系客户: {{order.ContactPerson}}</div>
          <div class="type">联系手机: {{order.ContactCellPhone}}</div>
          <div class="type">申请时间: {{order.ApplyDate}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getRefundDetail, postSellerSendGoods } from '../../network/order'
import { format } from 'date-fns'
import { Toast } from 'vant'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      orderId: '',
      order: {},
      ExpressCompanyName: '',
      ShipOrderNumber: '',
      expressShow: false,
    }
  },
  mounted() {
    this.orderId = this.$route.query.orderId
    this.getRefundDetail()
  },
  methods: {
    sendInfo(){
      this.expressShow = true
    },
    getRefundDetail(){
      let requestData = {
        userkey: this.userKey,
        id: this.orderId,
      }
      getRefundDetail(requestData, order => {
        order.ApplyDate = format(new Date(order.ApplyDate), 'yyyy-MM-dd HH:mm:ss')
        this.order = order
        this.$set(this.order, 'orderProduct', JSON.parse(sessionStorage.getItem('refundOrder')))
      })
    },
    expressSubmit(){
      let requestData = {
        userkey: this.userKey,
        Id: this.orderId,
        ExpressCompanyName: this.ExpressCompanyName,
        ShipOrderNumber: this.ShipOrderNumber,
      }
      postSellerSendGoods(requestData, res => {
        Toast('提交成功')
        this.expressShow = false
        this.getRefundDetail()
      })
    }
  },
}
</script>

<style scoped>
.container{
  background-color: #fff;
}
.tips{
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 15px;
  font-size: 14px;
}
.tips img{
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.list{
  border-top: 1px solid #e4e4e4;
}
.item{
  margin-bottom: 10px;
  background-color: #ffffff;
  padding: 0 15px;
}
.item .time-status-deal{
  margin-top: 20px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f4f4f4;
  padding: 0 0 0 20px;
  border-radius: 3px;
}
.item .time-status-deal img{
  width: 22px;
  height: 22px;
  padding-right: 10px;
}
.item .status-deal{
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item .status-deal .price{
  flex-grow: 1;
}
.item .status-deal .price i{
  color: #d50721;
  font-weight: bold;
}
.item .status-deal .link{
  width: 70px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  background-color: #d50721;
}
.item .status-deal .status{
  padding-right: 15px;
  margin-right: 5px;
  color: #000;
  font-weight: bold;
  /* border-right: 1px solid #cccccc; */
}
.item .pro-info{
  padding: 15px 0 15px 0;
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}
.item .pro-info img{
  width: 90px;
  height: 90px;
  margin-right: 10px;
  flex-shrink: 0;
}
.item .pro-info .name{
  flex-grow: 1;
  padding-right: 10px;
  height: 66px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
  font-size: 14px;
}
.item .pro-info .rt .sort{
  font-size: 14px;
  color: #999;
}
.item .pro-info .rt .sort span{
  padding-right: 20px;
}
.item .pro-info .price-num{
  text-align: right;
}
.item .pro-info .price-num .num{
  color: #999;
}
.item .total{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 40px;
  padding-right: 10px;
}
.item .total .amount{
  padding-right: 10px;
}
.item .total .price i{
  padding-left: 5px;
  color: #d50721;
}
.links{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px 15px 10px;
}
.links .type{
  color: #999;
  font-size: 14px;
}
.links .link{
  min-width: 80px;
  padding: 8px 15px;
  font-size: 14px;
  margin-left: 10px;
  border-radius: 50px;
  border: 1px solid #e4e4e4;
  box-sizing: border-box;
  text-align: center;
}
.links .link-on{
  border: none;
  color: #ffffff;
  background-color: #d50721;
}
.links .link-ongray{
  border: none;
  color: #ffffff;
  background-color: #222;
}
.notips{
  text-align: center;
  line-height: 10;
  border: none;
  color: #999;
}
.links2{
  line-height: 2;
}
.links2 .type{
  padding: 0 10px;
}
.seller-remark{
  padding: 10px 20px;
  margin-top: 5px;
  margin-bottom: 10px;
  background-color: #f7f7f7;
  border-radius: 4px;
  text-align: right;
  color: #999;
}
.express{
  padding: 3px 15px 0 15px;
}
.express .item{
  display: flex;
  height: 50px;
  padding: 0 5px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  border-bottom: 1px solid #e4e4e4;
}
.express .item .ipt{
  flex-grow: 1;
}
.express .item input{
  width: 100%;
  text-align: right;
}
.express .expbtn{
  text-align: right;
  padding: 10px 0;
}
.express .expbtn .subbtn{
  display: inline-block;
  line-height: 38px;
  width: 90px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  font-size: 14px;
  background-color: #222;
}
.order-id{
  padding-top: 20px;
  color: #999;
}
</style>